<template>
  <div class="container">
    <Header v-bind:isBack="isBack" v-bind:isMusic="isMusic" @fn="getTitle" :typeStatus="status"></Header>
    <!-- 如果点击的是发现歌单  显示下面这一块的内容 -->
    <div class="lookSong" v-if="status == 1">
      <!-- 推荐分类部分 -->
      <div class="type">
        <div class="top areatop space-between">
          <span class="title fs-32">推荐分类</span>
          <span class="all-type fs-26 more" @click="allType">全部分类</span>
        </div>
        <div class="type-list">
          <div class="content">
            <span
              class="tip"
              @click="checkType(item,index)"
              :class="{ active:index == typeChecked}"
              v-for="(item,index) in typeList"
              :key="index"
            >{{item.music_list_category_name}}</span>
          </div>
        </div>
      </div>
      <!-- 推荐分类区域 -->
      <div class="classify">
        <div class="top areatop space-between">
          <span class="title fs-32">推荐歌单</span>
          <!-- <span class="all-type fs-26 more">更多</span> -->
        </div>
        <div class="lunbo">
          <!-- <div class="swiper-wrapper" ref="lunBo">
              <div ref="slids" class="swiper-slide" v-for="iemt in images" :key="item.id">
                <img @click="toSongIndex(item)" :src="item.song_sheet_photo" class="main-img">
                <span class="fs-26">{{item.song_sheet_name}}</span>
              </div>
          </div>-->
          <swiper :options="swiperOption">
            <swiper-slide v-for="item in images" :key="item.id">
              <img @click="toSongIndex(item)" :src="item.song_sheet_photo" class="main-img" />
              <span class="fs-26">{{item.song_sheet_name}}</span>
              <div class="play-mes">
                    <img :src="playBtnS" alt />
                  <span class="num fs-24">{{item.run_num}}次播放</span>
              </div>
            </swiper-slide>
          </swiper>
        </div>
        <itemList :id="id"></itemList>
      </div>
    </div>
    <!-- 如果点击的是歌曲    显示下面这一块的内容 -->
    <Singer v-if="status == 2"></Singer>
    <!-- 排行榜 -->
    <Rank v-if="status == 3"></Rank>
    <!-- <player v-if="musicMes" :isFull="store.isFullPlay"></player> -->
  </div>
</template>

<script>
import Swiper from "swiper";
import Header from "@/components/header-nav";
import Singer from "./component/singer";
import Rank from "./component/rank";
import "swiper/dist/css/swiper.css";
import "swiper/dist/js/swiper.js";
export default {
  name: "find-music",
  data() {
    return {
      status: 1,
      store: this.getStore(),
      id: 6,
      title: "发现音乐",
      playBtnS: require("@/assets/index/playVideoS.png"),
      typeChecked: 0,
      isBack: true,
      isMusic: true,
      images: [], //轮播图
      images1: [], //轮播图
      typeList: [],
      swiperOption: {
        slidesPerView: 3,
        loop: true,
        centeredSlides: false,
        updateOnImagesReady: true,
        spaceBetween: 16
      },
      rankList: [],
      optionList: [],
      itemList: [],
      musicMes: {}
    };
  },
  components: {
    Header,
    Singer,
    Rank
  },
  methods: {
    // 跳转到歌曲列表页
    toSongIndex(item) {
      console.log(this.status, "----发现音乐--分类歌单");
      window.sessionStorage.setItem("findStatus", JSON.stringify(this.status));
      this.$router.push({
        path: "/index/song-sheet",
        query: { id: item.song_sheet_id, sheetStatus: 1 }
      });
    },
    // 获取当前点击的头部标题
    getTitle(e) {
      this.status = e;
    },
    // 跳转到歌曲详情页
    toDetail(item) {
      this.$router.push({
        path: "/index/son-detail",
        query: { id: item.recommend_song_sheet_id }
      });
    },
    // 查看全部分类
    allType() {
      this.$router.push({
        path: "all-type"
      });
    },
    // 选择分类加高亮效果
    checkType(item, index) {
      this.typeChecked = index;
      //this.typeChecked = item.id;
      this.id = item.recommend_song_sheet_id;
      // console.log(this.id,'===this.id');
      this.getSonList();
    },
    // 获取歌单分类名称接口
    getSonType() {
      const url = this.$host1 + `home/recommendSongSheet`;
      this.$axios
        .get(url)
        .then(res => {
          if (res.data.code == 200) {
            this.typeList = res.data.data.list;
            // console.log(this.typeList ,'--this.typeList ');
          } else {
            this.AlertWin(res.data.msg);
          }
        })
        .catch(err => {
          console.log(err, "err-----");
        });
    },
    // 获取歌单列表数据
    getSonList() {
      const url =
        this.$host1 +
        `home/recommendSongSheetListAd?song_sheet_category_name=` +
        this.id;
      return this.$axios
        .get(url)
        .then(res => {
          // console.log(res.data.data,'----res.data.data');
          if (res.data.code == 200) {
            this.images = res.data.data;
            this.images1 = res.data.data;
          } else if (res.data.code == 0) {
            this.AlertWin(res.data.msg);
          }
        })
        .catch(err => {
          console.log(err, "err-----");
        });
    },

    initialSlide() {
      this.mySwiper = new Swiper(".lunbo", {
        slidesPerView: 3,
        centeredSlides: false,
        watchSlidesProgress: true,
        pagination: ".swiper-pagination",
        paginationClickable: true,
        updateOnImagesReady: true,
        loop: true,
        spaceBetween: 16
      });
    }
  },
  created() {
    var num = window.sessionStorage.getItem("findStatus");
    if (num) {
      this.status = num / 1;
      this.typeStatus = num / 1;
    }
    this.musicMes = window.localStorage.getItem("musicMes");
    this.getSonType();
    this.getSonList();
  },
  mounted() {}
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.container {
  height: 100%;
  padding-bottom: 1.2rem;
  padding-top: 1rem;
  // background-color: #fff;
  // 推荐分类样式设置
  .type {
    width: 100%;
    background-color: #fff;
    padding: 0.24rem;
    box-sizing: border-box;
    .top {
      .title {
        font-weight: 800;
        color: rgba(68, 68, 68, 1);
      }
      .all-type {
        line-height: 0.32rem;
        font-weight: 500;
        color: rgba(153, 153, 153, 1);
      }
    }
    .type-list {
      box-sizing: border-box;
      display: flex;
      flex-direction: row;
      .content {
        flex-wrap: wrap;
        .tip {
          display: inline-block;
          text-align: center;
          margin-bottom: 0.17rem;
          margin-right: 0.05rem;
          width: 1.68rem;
          height: 0.68rem;
          line-height: 0.7rem;
          background: #fff;
          border: 0.015rem solid rgba(187, 187, 187, 1);
          border-radius: 0.34rem;
          font-size: 0.28rem;
          font-weight: 500;
          color: rgba(102, 102, 102, 1);
        }
        .tip.active {
          background: rgba(116, 8, 180, 1);
          color: #fff;
          border: 0.015rem solid rgba(116, 8, 180, 1);
        }
      }
    }
    .areatop .more {
      margin-top: -0.2rem;
    }
  }
  .classify {
    width: 100%;
    margin-top: 0.23rem;
    background-color: #fff;
    .top {
      padding: 0 0.24rem;
      box-sizing: border-box;
      margin-bottom: 0.18rem;
      .title {
        font-weight: 800;
        color: rgba(68, 68, 68, 1);
      }
    }
    // 轮播图样式设置
    .lunbo {
      width: 100%;
      overflow: hidden;
      // height: 2.8rem;
      margin-bottom: 0.27rem;
      .swiper-container {
        width: 100%;
        -webkit-perspective: 12rem;
        -moz-perspective: 12rem;
        -ms-perspective: 12rem;
        perspective: 12rem;
      }
      .swiper-wrapper {
        margin-top: 0.1rem;
        // transform: translate(-0.28rem);
      }
      .swiper-slide {
        position: relative;
        width: 3.14rem;
        // height: 3.16rem;
        // transform: scale(0.8);
        -webkit-transform-style: preserve-3d;
        -moz-transform-style: preserve-3d;
        -ms-transform-style: preserve-3d;
        transform-style: preserve-3d;
        .main-img {
          height: 2.8rem !important;
          object-fit: cover;
        }
        span {
          // display: -webkit-box;
          // -webkit-line-clamp: 2;
          // -webkit-box-orient: vertical;
          // text-overflow : ellipsis;
          // overflow: hidden;
          // width: 100%;
          // text-align: center;
          // height: 0.69rem;
          // font-weight:bold;
          // text-align: center;
          // color:rgba(102,102,102,1);
          // line-height:0.69rem;
          width: 100%;
          word-break: break-all;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1;
          overflow: hidden;
          font-weight: bold;
          color: rgba(102, 102, 102, 1);
          text-align: center;
        }
        .play-mes{
          position: absolute;
          display: flex;
          align-items: center;
          right: 0.15rem;
          top: 0.15rem;
          img{
            width: 0.16rem;
            height: 0.19rem;
            margin-right: 0.1rem;
          }
          span{
            font-size: 0.22rem;
            color: #fff;
          }
        }
      }
      .swiper-slide-active {
      }
      .swiper-slide .main-img {
        object-fit: cover;
        width: 100%;
        height: 100%;
        margin: 0 auto;
        display: block;
        border-radius: 0.06rem;
      }
      #pagination {
        position: absolute;
        bottom: 1rem;
        width: 100%;
      }

      #pagination .swiper-pagination-bullet {
        width: 9.5%;
        float: left;
        margin: 0 0 0 6.15%;
        background: none;
        opacity: 1;
      }
      .swiper-pagination-bullet i {
        background: #41203f;
        width: 0.24rem;
        height: 0.24rem;
        line-height: 0.24rem;
        font-size: 0.12rem;
        border-radius: 0.5rem;
        display: block;
        font-style: normal;
        text-align: center;

        margin: 0 auto;
        color: #f5b55c;
      }
      .swiper-slide {
        width: 3.16rem;
        // margin-left: -0.16rem;
      }
      .swiper-slide-active {
        width: 3.16rem !important;
        // transform: scale(1);
        .main-img {
          width: 100%;
          height: 3.16rem !important;
          border-radius: 0.06rem;
          object-fit: cover;
        }
      }
      .swiper-slide-next {
        width: 3.16rem !important;
        // transform: scale(0.8);
        z-index: 900000;
        // margin-left: -0.5rem;
        .main-img {
          width: 100%;
          height: 2.8rem;
          border-radius: 0.06rem;
          object-fit: cover;
        }
      }
      .swiper-slide-prev {
        width: 3.16rem !important;
        // margin-right: -0.5rem;
        // transform: scale(0.8);
        .main-img {
          width: 100%;
          height: 2.8rem;
          border-radius: 0.06rem;
          object-fit: cover;
        }
      }
    }
    // 列表样式设置
    .list {
      width: 100%;
      background-color: #fff;
      flex-wrap: wrap;
      padding: 0 0.23rem;
      box-sizing: border-box;
      .item {
        width: 2.2rem;
        height: 2.6rem;
        margin-bottom: 1rem;
        img {
          width: 100%;
          height: 2.2rem;
          margin-bottom: 0.17rem;
        }
        span {
          display: -webkit-box;
          text-align: center;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          text-overflow: ellipsis;
          overflow: hidden;
          width: 2.2rem;
          height: 0.69rem;
          font-weight: bold;
          color: rgba(102, 102, 102, 1);
        }
      }
    }
  }
}
</style>
